@import "register.scss";

$bg_color: #b3b3b3;
$main_color: #333333;
$secondery_color: #b7a457;
$secondery_fade_color: #c9bb82;
$main_fade_color: #4d4d4d;
$text_main_color: #ffffff;

/*our custom font*/
@font-face {
    font-family: disposabledroid;
    src: url(../fonts/disposabledroid-bb.regular.ttf);
}

body{
	margin: 0 0 0 0;
	padding: 0;
	background-color: $bg_color;
	font-family: Helvetica, Arial, Sans-Serif;
	
	#container{
		//border: 1px solid green;
		max-width: 1100px;
		margin: 0 auto;
		overflow: auto; 
	
		header{
			background-color: $main_color;
			height: 80px;
			
			.logo{
				width: 600px;
				margin: 0 auto;
				color: $text_main_color;
				text-align: center;
				h1{
					margin: -10px 0 0 0;
					font-size: 3.7em;
					padding-top: 10px;
				}
				
				h3{
					margin: -15px 0 0 0;
					color: $secondery_color;
				}
			}
		}
	
		#content{
			
			.menu_holder{
				background-image: url('../img/big_picture1.jpg');
				background-position: -50px -45px;
				height: 400px;

				.headline{
					position: absolute;
					color: $text_main_color;
					top: 230px;
					margin-left: 20px;
					
					h1{
						font-size: 2.8em;
					}
					
					h3{
						color: $secondery_color;
						margin-top: -60px;
						
					}
					
					.button{
						font-size: 2em;
						font-weight: bold;
					}
				}
				
				
				.menu {
					float: right;
					background-color: $main_color;
					padding: 0.15em;
					font-size: 1.3em;
				
					li{
						margin-left: 1.1em;
						margin-right: 1.1em;
					
						a{
							text-decoration: none;
							color: $text_main_color;
						
							&:hover{
								color: $secondery_color;
							}
							
							&.active{
								color: $secondery_color;
							}
						}
					}
				}
			
			}
		
			.articles{
				background-color: $main_color;
				overflow: auto; 
				padding: 1%;
				
				.column{
					width: 49.5%;		
					&.wide{
						width: 100%;
					}
					h3{
						margin: 0 0 0 0;
						color: $text_main_color;
					}
				
					hr{
						border: 0;
						border-top: 1px solid $secondery_color;
						margin-top: 0;
					}
				
					.box{
						background-color: $main_fade_color;
						margin-top: 10px;
						width: 100%;
						height: 80px;
						
						&:hover{
							background-color: #5e5e5e;
						}
					}
				
					.bigbox{
						@extend .box;
						height: 440px;
					}
					
					p{
						padding: 0 10px;
						text-align: justify;
						color:white;
						margin-top: 2px;
					}
				}
			}
		}
		
		footer{
			
			
			background-color: $secondery_color;
			padding: 15px;
			color: $text_main_color;
			
			.links{
				text-align: center;
				a{
					text-decoration: none;
					color: $text_main_color;
				}
			}
		}
	}
}

.button{
	background-color: $secondery_color;
	padding: 6px;
	padding-bottom: 1px;
	padding-left: 14px;
	padding-right: 14px;
	cursor: pointer;
	font-family: disposabledroid;
	
	&:hover{
		background-color: $secondery_fade_color;
	}
}

.player_card{
	
	
	img{	
		display:block-inline;
		height: 60px;
		margin-top: 10px;
		margin-left: 10px;
	}
	
	.player_name{
		display: block;
		color: $text_main_color;
		font-size: 1.3em;
		margin-top: -2.2em;
		margin-left: 80px;
		
		.points{
			color: $secondery_color;
			margin-right: 5px;
			&::after{
				content: ' pts.'
			}
		}
	}
	
}

li{

	float: left;
	list-style: none;
}

.right{
	float: right;
}
			
.left{
	float: left;
}

.eightbit{
	font-size: 1.5em;
	font-family: disposabledroid;
}

/*Styles only for How To Play page*/

.textholder{
	padding: 5px;
	background-color: #4d4d4d;
}